import { defineComponent, reactive } from "vue";
import PageTitle from "@/components/PageTitle";
import RowView from "@/components/RowView";
import Text from "@/components/Text";
import LabelGroup from "@/components/LabelGroup";
import CardView from "@/components/CardView";
import ButtonGroupView from "@/components/ButtonGroupView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import { getSize } from "@/command/apiTool";
import { useRequest } from "./request";
import { useRoute, useRouter } from "vue-router";
import RoundInfo from "@/components/RoundInfo";
import GreyBlock from "@/components/GreyBlock";
import TextView from "@/components/TextView";
import { Divider } from "vant";
import RoundImg from "@/components/RoundImg";
import phoneIcon from "@/assets/image/phone_icon.png";
import { ILabelProps } from "@/components/Label/types";
import DetailedInfo from "@/components/DetailedInfo";
import InfoCellGray from "@/components/InfoCellGray";
import Banner from "@/components/Banner";
import LineChart from "@/components/LineChart";
import { lineChartData } from "@/components/LineChart/types";

export default defineComponent({
  name: "",
  setup() {
    const router = useRouter();
    const route = useRoute();
    const { queryDhDetail, suggestList, queryApplyNum, deviceList } =
      useRequest();
    const render1 = () => {
      return (
        <img src={queryDhDetail.value.entityLogo} class="w-full !h-[206px]" />
      );
    };
    const render2 = () => {
      const data = [
        {
          name: "能检农产",
          value: queryDhDetail.value.productTypeName,
          width: "100%",
        },
        {
          name: "营业时间",
          value: queryDhDetail.value.businessDate,
          width: "100%",
        },
        {
          name: "联系方式",
          value: queryDhDetail.value.phone,
          width: "100%",
        },
      ];
      return (
        <DetailedInfo
          {...queryDhDetail.value}
          title={queryDhDetail.value.entityName}
          desc={queryDhDetail.value.address}
          distance={queryDhDetail.value.jl}
          text={data}
        />
      );
    };
    const renderItem = (e: any) => {
      const buttons: IButtonGroupViewData[] = [
        {
          text: "去申请",
          type: "primary",
          plain: true,
          onClick: () => {
            router.push(`/appointmentApplication?id=${e.id}`);
          },
        },
      ];
      return (
        <div
          onClick={() => {
            router.replace(`/detectionDhDetail?id=${e.id}`);
            setTimeout(() => {
              window.location.reload();
            }, 200);
          }}
        >
          <InfoCellGray
            {...{
              title: e.entityName,
              src: e.logo,
            }}
          >
            <TextView limitedNumber={1}>{e.address}</TextView>
            <ButtonGroupView
              data={buttons}
              class={"flex !justify-end w-[130px] max-sm:w-[170px]"}
            />
          </InfoCellGray>
          <Divider />
        </div>
      );
    };
    const render6 = () => {
      return (
        <CardView
          title="检测设备"
          class="mt-[12px]"
          radius={0}
          right={() => (
            <div
              class="blue-text"
              onClick={() => router.push(`/deviceList?id=${route.query.id}`)}
            >
              查看更多
            </div>
          )}
        >
          <RowView class="!items-start flex justify-start flex-wrap">
            {deviceList.value.slice(0, 3).map((e: any) => {
              return (
                <div class={"text-center text-[14px] text-[#333333] mr-[10px]"}>
                  <img src={e.img} class={["w-[105px] h-[85px] rounded-5"]} />
                  {e.name}
                </div>
              );
            })}
          </RowView>
        </CardView>
      );
    };
    const renderChart = () => {
      const data: lineChartData[] = [
        {
          name: "申请数",
          data: queryApplyNum.value.smallApplyNumYear,
          color: "#4485FF",
          areaColor: ["#4485FF", "rgba(255,255,255,0)"],
        },
        {
          name: "受理数",
          data: queryApplyNum.value.acceptNumYear,
          color: "#28C9BF",
          areaColor: ["#28C9BF", "rgba(255,255,255,0)"],
        },
      ];
      const options = {
        xAxis: {
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
      };
      return (
        <CardView title={"检测情况"} class={"!mt-[10px]"} radius={0}>
          <div class={"flex text-[10px] mb-10"}>
            <div class={"mr-[30px]"}>
              <div>小户申请类</div>
              <div>
                计数
                <span class={"text-[#6599e2]  mx-[4px]"}>
                  {queryApplyNum.value.smallApplyNum}
                </span>
                次
              </div>
            </div>
            <div>
              <div>受理申请类</div>
              <div>
                计数
                <span class={"text-[#54c2b7] mx-[4px]"}>
                  {queryApplyNum.value.acceptNum}
                </span>
                次
              </div>
            </div>
          </div>
          <LineChart
            data={data}
            options={options}
            class="!h-[200px] !w-[335px]"
          />
        </CardView>
      );
    };
    const render3 = () => {
      return (
        <CardView class="mt-[12px]" title="推荐列表" radius={0}>
          {suggestList.value.map((item: any) => {
            return renderItem(item);
          })}
        </CardView>
      );
    };
    const render4 = () => {
      const buttons: IButtonGroupViewData[] = [
        {
          text: "预约检测",
          childClass: "!h-[40px]",
          style: {
            background: "linear-gradient(90deg, #66D0FF 0%, #3893FF 100%)",
            border: "none",
            borderRadius: getSize(25),
            width: "100%",
            height: getSize(40),
          },
          onClick: () => {
            router.push(`/appointmentApplication?id=${route.query.id}`);
          },
        },
      ];
      return (
        <div
          class="fixed left-0 right-0 bottom-0 h-[61px] flex items-center justify-center bg-white px-[10px]"
          style={{
            boxShadow: "0px -3px 12px 1px rgba(0,0,0,0.1);",
            borderTop: "1px solid #f3f3f3",
          }}
        >
          <ButtonGroupView data={buttons} />
        </div>
      );
    };
    return () => {
      return (
        <PageTitle title="大户详情" childClass="!p-[0px] !pb-[60px]">
          {render1()}
          {render2()}
          {render6()}
          {renderChart()}
          {render3()}
          {render4()}
        </PageTitle>
      );
    };
  },
});
